<!--
 * @Author: doing
 * @Date: 2023-08-23 21:13:59
 * @LastEditors: git config user.name && git config user.email
 * @LastEditTime: 2023-08-23 22:39:51
 * @FilePath: \center\src\components\ToastMessage.vue
 * @Description: 
 * 消息提示组件
 * Copyright (c) 2023 by 1540265624@qq.com, All Rights Reserved. 
-->
<template>
  <transition name="slide">
    <div v-if="showToast" class="toast-container">
      <div :class="['toast', toastType]">
        <span class="toast-message">{{ message }}</span>
      </div>
    </div>
  </transition>
</template>
  
<script>
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const showToast = ref(false);   // 是否展示提示消息
    const message = ref('');        // 提示消息内容
    const toastType = ref('');      // 提示消息类型（用于添加不同样式）
    let timer = null;               // 定时器用于自动隐藏提示消息

    // 自动隐藏提示消息
    watchEffect(() => {
      if (showToast.value) {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          hide();
        }, 3000); // 2秒后自动隐藏
      }
    });

    /**
     * 显示提示消息
     * @param {String} type 类型（warning、info等）
     * @param {String} msg 提示消息内容
     */
    function show(type, msg) {
      showToast.value = true;
      toastType.value = type;
      message.value = msg;
    }

    /**
     * 隐藏提示消息
     */
    function hide() {
      showToast.value = false;
      toastType.value = '';
      message.value = '';
    }

    return {
      showToast,
      message,
      toastType,
      show,
      hide
    };
  }
};
</script>
  
<style scoped>
.toast-container {
  position: fixed;
  top: 40px;
  right: 100px;
  z-index: 9999;
}

.toast {
  width: 100px;
  text-align: center;
  padding: 10px 20px;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

.warning {
  background-color: #f56c6c;
  /* 警告样式 */
}

.info {
  color: #989AA1 !important;
  background-color: #F4F4F5;
  /* 信息样式 */
}

.success {
  background-color: #67C23A
}


.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}

.slide-enter-from, .slide-leave-to {
  transform: translateX(100%);
}
</style>
  
